<template>
  <h1>07-组合API-reactive函数</h1>
  <h2>obj:{{ obj }}</h2>
  <h2>name：{{ name }}</h2>
  <button @click="btn">点我</button>
</template>

<script>
import { reactive,toRef  } from 'vue'
export default {
 name: 'App',
  setup() {
    // 定义响应式对象数据
    const obj = reactive({
      name: '小马',
      age: 88,
    })

    // 修改名字的函数
    const btn = () => {
      obj.name = '老马'
      console.log('obj变了吗', obj)
    }

    // 注意：这种写法是把对象的值取出来了，取出来就失去关联了
    // const name = obj.name

    // toRef转换响应式数据包装成对象，value 存放值的位置
    const name = toRef(obj, 'name')

    console.log(name);  // object
    console.log(name.value);  // '小马'
    console.log(name._object === obj);   // true，关联的对象可以通过 _object 访问到

    // 返回给模板使用
    return { obj, name, btn }
  },
}
</script>